<template>
    <div>
        <el-card>
            <template #header>
                <h3>职称管理</h3>
            </template>
            <el-button class="add" type="primary" @click="showAddWindow()">添加职称</el-button>
            <!-- 搜索区域 -->
            <el-form inline align="center">
                <el-form-item label="职称" style="width: 200px">
                    <el-autocomplete v-model="params.title" value-key="name" :fetch-suggestions="querySearchTitles"
                        clearable class="inline-input w-50" placeholder="" @select="handleSelectTitle"
                        @input="clearTitle" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="searchTitles()">搜索</el-button>
                </el-form-item>
            </el-form>
            <!-- 表格区域 -->
            <el-table :data="titles" @sort-change="handleSortChange">
                <el-table-column label="职称名称" prop="name" sortable="custom" align="center"></el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button type="primary" @click="showEditWindow(scope.row)">修改名称</el-button>
                        <!-- 删除确认气泡 -->
                        <el-popconfirm width="250" icon-color="#626AEF" title="确认删除该职称吗？">
                            <template #reference>
                                <el-button type="danger">删除</el-button>
                            </template>
                            <template #actions="{ confirm, cancel }">
                                <el-button size="small" @click.once="cancel">取消</el-button>
                                <el-button type="danger" size="small" @click.once="deleteTitle(scope.row, confirm)">
                                    确认
                                </el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页区域 -->
            <el-pagination v-if="params.total > 0" :current-page="params.currentPage" :page-size="params.pageSize"
                background layout="total, prev, pager, next" :total="params.total"
                @current-change="handleCurrentChange" />
        </el-card>
        <!-- 职称名称编辑弹窗 -->
        <el-dialog v-model="showEdit" title="职称名称" width="300" @close="closeWindow" align="center">
            <el-input v-model="curTitle.name" style="width: 240px"></el-input>
            <template #footer>
                <div class="dialog-footer">
                    <el-button v-if="!showAdd" type="primary" @click="updateTitle(curTitle)">保存</el-button>
                    <el-button v-if="showAdd" type="primary" @click="addTitle(curTitle)">添加</el-button>
                    <el-button @click="showEdit = false">取消</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { titleAddAPI, titleFindAPI, titlesFindAPI, titleUpdateAPI } from '@/api/title';
import { ElMessage } from 'element-plus';

export default {
    data() {
        return {
            params: {
                // 查询参数
                title_id: '',
                title: '',
                // 分页参数
                total: 0,
                currentPage: 1,
                pageSize: 7
            },
            user_id: this.$route.params.id,
            titles: [],
            titlesAll: [],
            curTitle: {},
            showAdd: false,
            showEdit: false
        }
    },
    methods: {
        loadTitlesList() {
            titlesFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.titles = resp.data.datas;
                    this.params.total = resp.data.total;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
            titleFindAPI(this.params).then((resp) => {
                if (resp.data.code == 2000) {
                    this.titlesAll = resp.data.datas;
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        searchTitles() {
            this.loadTitlesList();
        },
        handleCurrentChange(page) {
            this.params.currentPage = page;
            this.loadTitlesList();
        },
        showAddWindow() {
            this.curTitle = {};
            this.showEdit = true;
            this.showAdd = true;
        },
        showEditWindow(row) {
            this.curTitle = JSON.parse(JSON.stringify(row));
            this.showEdit = true;
        },
        updateTitle(row) {
            titleUpdateAPI(row).then((resp) => {
                if (resp.data.code == 2000) {
                    this.curTitle.title_id = '';
                    this.curTitle.title = '';
                    this.loadTitlesList();
                    this.showEdit = false;
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        addTitle(row) {
            titleAddAPI(row).then((resp) => {
                if (resp.data.code == 2000) {
                    this.loadTitlesList();
                    this.showEdit = false;
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
        },
        //职称下拉框
        //该方法选择列表后触发
        handleSelectTitle(item) {
            this.params.title_id = item.id;
        },
        //输入框获取焦点时调用的方法
        querySearchTitles(queryString, cb) {
            let results = this.titlesAll;
            results = queryString
                ? results.filter(this.createFilter(queryString))
                : results;
            cb(results);
        },
        //这是当输入数据时触发的，筛选出和输入数据匹配的建议输入。
        createFilter(queryString) {
            return (item) => {
                // 确保 item 是一个字符串或对象
                if (typeof item === 'object') {
                    return JSON.stringify(item).toLowerCase().indexOf(queryString.toLowerCase()) > -1;
                }
                return item.toLowerCase().indexOf(queryString.toLowerCase()) > -1;
            };
        },
        //点击清除按钮时触发事件
        clearTitle() {
            this.params.title_id = '';
            this.loadTitlesList();
        },
        closeWindow() {
            this.showEdit = false;
            this.showAdd = false;
        },
        deleteTitle(row, confirm) {
            row.isDel = 1;
            titleUpdateAPI(row).then((resp) => {
                if (resp.data.code == 2000) {
                    this.loadTitlesList();
                    ElMessage.success(resp.data.message);
                } else {
                    ElMessage.error(resp.data.message);
                }
            })
            confirm();
        },
        handleSortChange({ prop, order }) {
            if (order) {
                // 根据 prop 和 order 进行排序
                this.params.sortProp = prop;
                this.params.sortOrder = order === 'ascending' ? 'asc' : 'desc';
                this.loadTitlesList();
            } else {
                // 清除排序
                delete this.params.sortProp;
                delete this.params.sortOrder;
                this.loadTitlesList();
            }
        }
    },
    created() {
        this.loadTitlesList();
    }
}
</script>

<style scoped>
.el-pagination {
    margin: 20px 0 0 450px;
    align-items: center;
}
</style>